<template>
    <div class="fluid">
        <div class="container">
            <div class="rowOne"></div>
            <div class="rowTwo">
                <div class="rowTwoL">
                    <ul>
                        <li v-for="(item,index) in list" :key = "index">
                            <img :src="item[0]">
                            <a href="javascript:;">{{item[1]}}</a>
                        </li>
                    </ul>
                </div>
                <div class="rowTwoR">
                    <jaxlAllal></jaxlAllal>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
const img1 = require("../../../assets/img/精选案例/切图/12.png")
const img2 = require("../../../assets/img/精选案例/切图/13.png")
const img3 = require("../../../assets/img/精选案例/切图/14.png")
const img4 = require("../../../assets/img/精选案例/切图/15.png")
import jaxlAllal from './jaxlAllal.vue';
export default {
    data(){
        return {
            list:[
                [img1,"全部案例"],
                [img4,"家具家电"],
                [img4,"游戏教育"],
                [img4,"汽车房产"],
                [img4,"商超餐饮"],
                [img4,"金融旅游"]
            ]
        }
    },
    components:{
        jaxlAllal
    }
}
</script>
<style scoped>
    .fluid{
        width: 100%;
        margin-bottom: 74px;
    }
    .container{
        width:1200px;
        margin: 0 auto;
        height: 640px;
        background: #F8F9FD;
    }
    .rowOne{
        height: 80px;
        margin-top: 80px;
    }
    .rowTwoL{
        width:200px;
        float: left;
    }
    .rowTwoR{
        width:1000px;
        float: right;
    }
    .rowTwoL>ul{
        overflow: hidden;
    }
    .rowTwoL>ul>li{
        width:200px;
        height: 80px;
        line-height: 80px;
        text-align: center;
    }
    .rowTwoL>ul>li>a{
        font-size: 18px;
        color:rgb(34, 34, 34);
        margin-left: 10px;
        padding: 5px 0 0 0;
    }
     .rowTwoL>ul>li>img{
         vertical-align: middle;
     }
</style>

